<script lang="ts">
import Vue from 'vue'
import NavBar from "@/components/nav-bar/nav-bar.vue";
import {getMachines} from "@/services/Agents/machine";
import tips from "@/utils/tips";
import {Machine} from "@/types/agent/stores";
import {copyFun} from "@/utils/utils";

export default Vue.extend({
  name: "Machines",
  components: {NavBar},
  data() {
    return {
      machines: [] as Machine[],
    }
  },
  computed: {
    lang() {
      return this.$t('agentPages.machines')
    },
  },
  onLoad(query?: AnyObject) {
    console.log(query)
    this.getMachine()
  },
  methods: {
    copyFun,
    async getMachine() {
      const machineRes = await getMachines()
      const {code, data, msg} = machineRes
      if (code === 200) {
        this.machines = data.data
      } else {
        tips.toast(msg)
      }
    },
    onGetPrinter(index: number) {
      const {device_id} = this.devices[index]
      tips.toast('成功')
    }
  }
})
</script>

<template>
  <view>
    <nav-bar :page-title="lang.pageName"/>
    <view :class="['padding-30', locale]">
      <!--      <view class="flex-between">-->
      <!--        <view/>-->
      <!--        <view class="add-device radio-40 padding-14-20" hover-class="hover" @click="">-->
      <!--          <view class="flex-center gap-20">-->
      <!--            <u-icon name="plus-circle" size="24" color="#fff"/>-->
      <!--            <view>{{lang.addDevice}}</view>-->
      <!--          </view>-->
      <!--        </view>-->
      <!--      </view>-->
      <template v-if="machines.length > 0">
        <view v-for="(item, index) in machines" :key="index" class="card column gap-8 text-28 padding-20 radio-10">
          <!-- 头部照片和名称-->
          <view class="flex-center gap-20">
            <image class="icon-90" src="/static/agent/device.png" mode="aspectFit"/>
            <view class="column gap-8">
              <view>{{ item.name || lang.deviceInfo.name }}</view>
              <view>
                <view :class="['text-22 device-label', !item.store_id ? 'device-label-unbound' : '']"
                      style="display: inline-block">
                  {{ item.store_id ? lang.deviceInfo['bound'] : lang.deviceInfo['unbound'] }}
                </view>
              </view>
            </view>
          </view>

          <view class="line"/>
          <!-- 设备ID 和设备编号-->
          <view class="flex-between padding-tb-10">
            <view>{{ lang.deviceInfo['deviceId'] }}</view>
            <view @longpress="copyFun(item.device_id)">{{ item.device_id }}</view>
          </view>

          <view class="flex-between padding-tb-10">
            <view>{{ lang.deviceInfo['deviceKey'] }}</view>
            <view @longpress="copyFun(item.device_password)">{{ item.device_password }}</view>
          </view>

          <!--        <view class="line"/>-->
          <!--        &lt;!&ndash; 重启设备&ndash;&gt;-->
          <!--        <view class="flex-between padding-tb-10" hover-class="hover" @click="onGetPrinter(index)">-->
          <!--          <view>{{ '获取打印机' }}</view>-->
          <!--          <view>-->
          <!--            <u-icon name="arrow-right"/>-->
          <!--          </view>-->
          <!--        </view>-->
        </view>
      </template>

      <view v-if="machines.length <= 0" class="center" style="height: 60vh;">
        <u-empty
            mode="data"
            :width="240"
            :hidden="240"
            :textSize="22"
            :text="lang.emptyDevice"
            icon="http://cdn.uviewui.com/uview/empty/data.png"
        />
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.add-device {
  display: inline-block;
  background-color: $uni-color-primary;
  color: white;
}

.device-label {
  padding: 4rpx 8rpx;
  border-radius: 10rpx;
  background: white;
  color: #1073FF;
  border: 1rpx solid #1073FF;
}

.device-label-unbound {
  color: #F25050;
  background: #FFEDED;
  border: 1rpx solid #FFEDED;
}
</style>